```html
<script setup>
  import * as tagsInput from "@zag-js/tags-input"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const service = useMachine(tagsInput.machine, {
    id: "1",
    defaultValue: ["React", "Vue"],
  })
  const api = computed(() => tagsInput.connect(service, normalizeProps))
</script>

<template>
  <div ref="ref" v-bind="api.getRootProps()">
    <span
      v-for="(value, index) in api.value"
      :key="index"
      v-bind="api.getItemProps({ index, value })"
    >
      <div v-bind="api.getItemPreviewProps({ index, value })">
        <span>{{ value }} </span>
        <button v-bind="api.getItemDeleteTriggerProps({ index, value })">
          &#x2715;
        </button>
      </div>
      <input v-bind="api.getItemInputProps({ index, value })" />
    </span>
    <input placeholder="Add tag..." v-bind="api.getInputProps()" />
  </div>
</template>
```
